<template>
  <div class="selfEle">
    <section class="leftSection">
      <selfContainer
          :height="30"
          title="车辆概况"
      >
        <ccgkFace :info-arr="['ccgk_pjcc','ccgk_lncc','ccgk_lwcc']" Arr ></ccgkFace>
      </selfContainer>
      <selfContainer
          :height="16"
          title="车位概况"
      >
        <cwgkFace :infoType="1" ></cwgkFace>
      </selfContainer>
      <selfContainer
          :height="19"
          title="在线车位类型"
      >
        <zxcwlxFace :infoArr="zxcwlxInfoArr" ></zxcwlxFace>
      </selfContainer>
      <selfContainer
          :height="30"
          title="各区停车泊位数规模"
      >
        <gqtcbwsgmFace></gqtcbwsgmFace>
      </selfContainer>
    </section>

    <section class="centerSection">
      <selfContainer
          :height="100"
          title="车场空间分布"
      >
<!--        TODO 地图弹框，自主编程-->

        <a-map popupid="popupid4" ref="a-map"> </a-map>
        <dv-border-box-9
          id="popupid4"
          v-if="ifPopup"
          :color="['#018CF4']"
          backgroundColor="#00000060"
          class="cckjfbPopup">
          <i @click = hidePopup class="iconfont icon-close" ></i>
          <div class="cckjfbPopupBody" >
            <span>琴海公寓</span>
            <dv-decoration-4 :reverse="true" />
            <div class="cckjfbInfo" >
              <div>
                <label>占用率</label><br>
                <span style="color: #00FFE6" >48%</span>
              </div>
              <div>
                <label>车位状态</label><br>
                <span style="color: #0092FF" >车位较多</span>
              </div>
              <div>
                <label>泊位剩余</label><br>
                <span style="color: #00FFE6" >171</span>
              </div>
              <div>
                <label>泊位总数</label><br>
                <span style="color: #0092FF" >200</span>
              </div>
            </div>
            <span>地址:胜利路与滨海道交口</span>
            <span>更新时间：2023-02-27 14:21:12</span>
          </div>
        </dv-border-box-9>
      </selfContainer>
    </section>

    <section class="rightSection">
      <selfContainer
          :height="13.3"
          title="实时车流量"
      >
        <realTimeTraffic></realTimeTraffic>
      </selfContainer>
      <selfContainer
          :height="13.3"
          title="充电电量"
      >
        <chargeElectric></chargeElectric>
      </selfContainer>
      <selfContainer
          :height="20.5"
          title="车流量变化趋势"
      >
        <trend></trend>
      </selfContainer>
      <selfContainer
          :height="22"
          title="泊位利用率"
      >
        <berthUtilization></berthUtilization>
      </selfContainer>
      <selfContainer
          :height="22"
          title="当日收费情况"
      >
        <todayCharge></todayCharge>
      </selfContainer>
    </section>
  </div>
</template>

<script>
import selfContainer from "@/components/selfContainer/index";
import ccgkFace from "@/components/ccgkFace/index";
import cwgkFace from "@/components/cwgkFace/index";
import gqtcbwsgmFace from "@/components/gqtcbwsgmFace/index";
import zxcwlxFace from "@/components/zxcwlxFace/index";
import bgtest from "@/assets/selfImp/2.png";
import realTimeTraffic from "@/components/realTimeTraffic/index";
import chargeElectric from "@/components/chargeElectric/index";
import trend from "@/components/trend/index";
import berthUtilization from "@/components/berthUtilization/index";
import todayCharge from "@/components/todayCharge/index";
import aMap from "@/components/map/index";

export default {
  name: 'BaseAll',
  components: {
    selfContainer,
    ccgkFace,
    cwgkFace,
    zxcwlxFace,
    realTimeTraffic,
    chargeElectric,
    trend,
    berthUtilization,
    todayCharge,
    gqtcbwsgmFace,
    aMap
  },
  data() {
  	return {
      bgtest,
      ifPopup:true,
      zxcwlxInfoArr:["zxcwlx_pjtcc","zxcwlx_lwggtcc"],
    }
  },
  computed: {

  },
  async created() { 
    let response = await fetch(`./testData/map-marker-4.json`, {
      method: "get",
      headers: {
        "Content-Type": "application/json",
      },
    });

    console.log("response");
    this.markData = await response.json();
    this.$refs['a-map'].renderMarkers(this.markData,{
      rotation: -411,
      zoom: 16.62,
      pitch: 70.3,
      center: [117.200586, 39.142763]
    })
  },
  mounted() {

  },
  methods: {
    hidePopup(){
      this.$refs['a-map'].closePopup()
    },
    test(){
      console.log("test");
      this.$Toast({
        content:"test"
      })
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
.selfEle{
  height: calc(100% - 0.3rem);
  width: calc(100% - 0.3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  > section{
    height: 100%;
    width: 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .centerSection{
    width: 40%;
    .mapImg{
      height: calc(100% - 40px);
      width: calc(100% - 40px);
      margin: 20px;
    }
    .cckjfbPopup {
      //position: absolute;
      height: 33.5%;
      width: 40%;
      top: 21%;
      left: 15%;
       .iconfont{
        margin: 5% 5% 0 0;
        color: #0160C8;
        float: right;
        font-size: xx-large;
        height: 10%;
        width: 10%;
      }
      .cckjfbPopupBody{
        background-color: rgba($color: #000000, $alpha: 0.4);
        padding: 10%;
        font-size: medium;
        >span{
          line-height:35px;
          color: aliceblue;
        }
        .cckjfbInfo{
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          align-content: center;
          >div{
            width: 45%;
            padding: 6% 0;
            text-align: center;
            >label{
              color: #FFFFFF;
              font-size: initial;
              font-weight: 600;
              margin-right: 5%;
            }
            >span{
              font-size: x-large;
              font-weight: 800;
            }
          }
        }
      }
    }
  }

  //左侧部分
  .leftSection{
    .clgk-button{
      padding: 20px;
      color: white;
      font-size: 30px;
    }
  }
}
</style>
<style>
#popupid4{
  width: 305px;
}
</style>
